<template>
  <view>
    <tui-list-cell @click="chooseImage">
      <view class="flex-row justify-between align-center">
        <text class="text-28 color-t3">头像</text>
        <view class="flex-row align-center">
          <l-avatar :avatar="userInfo ? userInfo.avatar : ''" />
          <text class="tbb-arrow-right color-t3 margin-left-20" />
        </view>
      </view>
    </tui-list-cell>

    <tui-modal :show.sync="showModal" :title="errMsg.title" :content="errMsg.msg" @click="modalClick" />
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { saveImage, openSetting } from '@/common/util'
export default {
  name: 'UserInfoAvatar',
  data() {
    return {
      showModal: false,
      errMsg: {
        title: '',
        msg: ''
      }
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      userId: 'userId'
    })
  },
  methods: {
    // 选择图片
    chooseImage() {
      saveImage('user').then(avatar => {
        this.$emit('update', {
          userId: this.userId,
          avatar
        })
      }).catch(err => {
        this.showModal = true
        this.errMsg = err
      })
    },
    // 打开设置
    modalClick(e) {
      this.showModal = false
      if (e.index && this.errMsg.code === 1025) {
        openSetting()
      }
    }
  }
}
</script>

<style scoped>

</style>
